<template>
  <view>
    <view class="margin020">
      <!-- logo -->
      <view class="center_center row bak">
        <image src="/static/logo.png" class="image" mode=""></image>
      </view>

      <!-- 用户名输入框 -->
      <view class="shouji">
        <image src="/static/login/dl_shouji.png" mode=""></image>
        <input type="text" placeholder="请输入账号" v-model="username" maxlength="11" />
      </view>

      <!-- 密码输入框 -->
      <view class="shouji">
        <image src="/static/login/dl_mima.png" mode=""></image>
        <input password type="text" placeholder="请输入密码" v-model="password" />
      </view>

      <!-- 确认密码输入框 -->
      <view class="shouji">
        <image src="/static/login/dl_mima.png" mode=""></image>
        <input password type="text" placeholder="请再次输入密码" v-model="confirmPassword" />
      </view>

      <!-- 注册按钮 -->
      <view class="denglu" @click="register()">
        注册
      </view>
      <!-- 已有账号，去登录 -->
      <view class="denglu" style="background-color: #6d82af;" @click="toLogin()">
      	已有账号？去登录
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',   // 用户名
      password: '',   // 密码
      confirmPassword: '' // 确认密码
    };
  },
  methods: {
    // 注册方法
    async register() {
      if (!this.username) {
        uni.showToast({
          title: '请输入用户名',
          icon: 'none',
        });
        return;
      }
      if (!this.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none',
        });
        return;
      }
      if (this.password !== this.confirmPassword) {
        uni.showToast({
          title: '两次密码输入不一致',
          icon: 'none',
        });
        return;
      }

      // 提交注册请求
      try {
        const res = await uni.request({
          url: 'http://123.56.82.144:8090/user/register',
          method: 'POST',
          data: {
            username: this.username,
            password: this.password,
          },
        });

        if (res.statusCode === 200 && res.data.data) {
          uni.showToast({
            title: '注册成功',
            icon: 'success',
          });
          // 跳转到登录页面
          uni.navigateTo({
            url: '/pages/login/login',
          });
        } else {
          uni.showToast({
            title: res.data.message || '注册失败',
            icon: 'none',
          });
        }
      } catch (error) {
        uni.showToast({
          title: '请求失败，请重试',
          icon: 'none',
        });
      }
    },

    // 跳转到登录页面
    toLogin() {
      uni.navigateTo({
        url: '/pages/login/login', // 跳转到登录页面
      });
    },
  },
};
</script>

<style scoped>
	.bak {
		text-align: center;
	}

	.width-vw {
		padding: 0 50upx;
		box-sizing: border-box;
	}

	.height-vh {
		height: 100vh;
	}

	.image {
		width: 200upx;
		height: 200upx;
	}
	.shouji {
		display: flex;
		align-items: center;
		padding: 30upx;
		border-bottom: 1upx solid #EEEEEE;
	}

	.shouji image {
		width: 40upx;
		height: 50upx;
		margin-right: 50upx;
	}

	.denglu {
		height: 90upx;
		text-align: center;
		line-height: 90upx;
		margin-top: 30upx;
		color: #FFFFFF;
		background-color: #ff4e22;
		border-radius: 50upx;
	}

	.box {
		color: #999999;
		padding: 20upx;
		font-size: 26upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.margin020{
		padding-top: 200upx;
	}
</style>